<template>
  <div class="com">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">统计时段</div>
        <el-date-picker
          v-model="value1"
          style="width:250px;"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        ></el-date-picker>
      </div>
      <div class="listitem">
        <div class="itemname">媒介类型</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">媒体</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listitem">
        <div class="itemname">节目</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left:20px;">搜索</el-button>
      </div>
    </div>
    <div class="infocom">
      <chart name="one1" :data="echarsimg" v-if="status"></chart>
    </div>
    <div class="tab2">
      <div class="tabitem" v-for="(item,index) in list" :key="index">
        <chart :name="'onex'+index"  :data="item"></chart>
      </div>
      <!-- <div class="tabitem">
        <chart name="one3" :data="echarsimg"></chart>
      </div> -->
    </div>
    <!-- <div class="tab2">
      <div class="tabitem">
        <chart name="one4 " :data="echarsimg"></chart>
      </div>
      <div class="tabitem">
        <chart name="one5" :data="echarsimg"></chart>
      </div>
    </div> -->
  </div>
</template>
<script>
import chart from "./echarts";
import { getALL__media_bing } from "../../../api/decision.js";
export default {
  components: {
    chart
  },
  data() {
    return {
      list: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      value1: "",
      status: false,
      bing1: {},
      echarsimg: {
        title: {
          text: "媒介分布",
          top: "50",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "50",
          top: "50",
          data: []
        },
        series: {
          name: "媒介",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      }
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      getALL__media_bing().then(res => {
        if (res.code == 200) {
          console.log(res);
          res.data.media.forEach(element => {
            this.echarsimg.legend.data.push(element.resources_name);
            this.echarsimg.series.data.push({
              value: element.count,
              name: element.resources_name
            });
          });
          var list = [];
          for (const key in res.data.data) {
            if (res.data.data.hasOwnProperty(key)) {
              const element = res.data.data[key];
              var obj = {
                title: {
                  text: element.name+'分布',
                  left: "center"
                },
                tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                  orient: "vertical",
                  left: "left",
                  data: []
                },
                series: {
                  name: element.name,
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "60%"],
                  data: [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  }
                }
              };
              if(element.data.length<1){
                break
              }
              element.data.forEach(el => {
                obj.series.data.push({
                  value: el.count,
                  name: el.resources_name
                });
                obj.legend.data.push(el.resources_name);
              });
            }
            list.push(obj)
          }
          console.log(list)
          this.list=list
          this.status = true;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;

  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .listitem {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 100px;
    }
  }
}
.infocom {
  width: 80%;
  height: 400px;
  margin: 0 auto;
}
.tab2 {
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // height: 300px;
  display: flex;
  .tabitem {
    width: 50%;
    margin-top: 20px;
    height: 300px;
  }
}
</style>